import { View, Text, Checkbox } from '@tarojs/components'
import Taro from '@tarojs/taro'

interface TodoItem {
  id: number;
  text: string;
  completed: boolean;
  date: string;
}

interface TemplateItem {
  id: number;
  text: string;
}

interface TodoListProps {
  activeTab: 'today' | 'templates' | 'history';
  currentDate: string;
  currentDateTodos: TodoItem[];
  templates: TemplateItem[];
  uniqueDates: string[];
  selectAll: boolean;
  toggleSelectAll: () => void;
  toggleTodo: (id: number) => void;
  deleteTodo: (id: number) => void;
  applyTemplate: (template: TemplateItem) => void;
  deleteTemplate: (id: number) => void;
  deleteAllTodosForDate: (date: string) => void;
  getDateStats: (date: string) => { completed: number; total: number; completionRate: number };
  setCurrentDate: (date: string) => void;
  setActiveTab: (tab: 'today' | 'templates' | 'history') => void;
}

const TodoList: React.FC<TodoListProps> = ({
  activeTab,
  currentDate,
  currentDateTodos,
  templates,
  uniqueDates,
  selectAll,
  toggleSelectAll,
  toggleTodo,
  deleteTodo,
  applyTemplate,
  deleteTemplate,
  deleteAllTodosForDate,
  getDateStats,
  setCurrentDate,
  setActiveTab
}) => {
  return (
    <>
      {activeTab === 'today' && (
        <View className='todo-list'>
          {currentDateTodos.length === 0 ? (
            <Text className='todo-empty'>暂无待办事项</Text>
          ) : (
            <>
              <View className='todo-list-header'>
                <View className='todo-select-all'>
                  <Checkbox
                    className='todo-checkbox'
                    checked={selectAll}
                    onClick={toggleSelectAll}
                    value="selectAll"
                  />
                  <Text className='todo-select-all-text'>全选</Text>
                </View>
              </View>
              
              {currentDateTodos.map(todo => (
                <View key={todo.id} className={`todo-item ${todo.completed ? 'todo-completed' : ''}`}>
                  <View className='todo-item-left'>
                    <Checkbox
                      className='todo-checkbox'
                      checked={todo.completed}
                      onClick={() => toggleTodo(todo.id)}
                      value={todo.id.toString()}
                    />
                    <Text className='todo-text'>{todo.text}</Text>
                  </View>
                  <Text 
                    className='todo-delete'
                    onClick={() => deleteTodo(todo.id)}
                  >
                    删除
                  </Text>
                </View>
              ))}
            </>
          )}
        </View>
      )}

      {activeTab === 'templates' && (
        <View className='todo-template-list'>
          {templates.length === 0 ? (
            <Text className='todo-empty'>暂无模板</Text>
          ) : (
            templates.map(template => (
              <View key={template.id} className='todo-template-item'>
                <Text className='todo-template-text'>{template.text}</Text>
                <View className='todo-template-actions'>
                  <Text 
                    className='todo-template-apply'
                    onClick={() => applyTemplate(template)}
                  >
                    应用
                  </Text>
                  <Text 
                    className='todo-template-delete'
                    onClick={() => deleteTemplate(template.id)}
                  >
                    删除
                  </Text>
                </View>
              </View>
            ))
          )}
        </View>
      )}

      {activeTab === 'history' && (
        <View className='todo-history-section'>
          {uniqueDates.length === 0 ? (
            <Text className='todo-empty'>暂无历史记录</Text>
          ) : (
            uniqueDates.map(date => {
              const stats = getDateStats(date);
              return (
                <View 
                  key={date} 
                  className='todo-history-item'
                >
                  <Text 
                    className='todo-history-date'
                    onClick={() => {
                      setCurrentDate(date);
                      setActiveTab('today');
                    }}
                  >
                    {date}
                  </Text>
                  <View className='todo-history-actions'>
                    <Text className='todo-history-completion'>
                      完成率: {stats.completionRate}% ({stats.completed}/{stats.total})
                    </Text>
                    <Text 
                      className='todo-history-delete'
                      onClick={() => deleteAllTodosForDate(date)}
                    >
                      删除
                    </Text>
                  </View>
                </View>
              );
            })
          )}
        </View>
      )}
    </>
  );
};

export default TodoList; 